<template>
  <PCard class="Enterprise-service-model-con" :isCardBorder="false" :shadow="'never'" :isHeadBottomBorder="false"
    :bodyStyle="{ width: '100%' }">
    <!-- <div slot="header" class="card-title">
      <span>企业服务模式选择</span>
    </div> -->

    <div class="data-list-con">
      <a-radio-group v-model="value" @change="onChange">

        <PCard :key="index + ''" v-for="(itenIndex, index) in formDataConfig" class="esm-item" :isCardBorder="true"
          :shadow="'never'" :isHeadBottomBorder="false" :bodyStyle="{ width: '100%' }">
          <div slot="header" class="card-title">
            <span>{{ formTitleList[index] }}</span>
            <a-radio-button :value="index"> 选择</a-radio-button>
          </div>
          <div class="esm-item-body">
            <!-- {{itenIndex}} -->
            <PageForm :formConfig="formConfig" :itemList="itenIndex">
              <template v-slot:rateType="itemData">
                <div class="qyfwms-con" style="width: 100%;">
                  {{ { 1: '固定费率', 2: '阶梯费率', 3: '累进阶梯' }[itemData.value] }}
                </div>
              </template>
              <template v-slot:servicerateList="itemData">
                <div class="qyfwms-con" style="width: 100%;">
                  <FWFL :dataList="itemData"></FWFL>
                </div>
              </template>
            </PageForm>
          </div>
        </PCard>

      </a-radio-group>
    </div>



  </PCard>
</template>

<script>
// import getDataForDB from '@/api/qsbEnterpriseServiceModel'
import FWFL from './FWFL.vue'
import * as Utils from '@/utils/util'
import { getChannelSvConf } from '@/api/enterprise'

const formItemAttr2 = {
  labelCol: { span: 8 }, wrapperCol: { span: 12 }
}
const formItemAttr21 = {
  labelCol: { span: 10 }, wrapperCol: { span: 12 }
}
const formItemAttr1 = {
  labelCol: { span: 3 }, wrapperCol: { span: 20 }
}
const pageFormConfig = {
  columnCount: 3,
  layout: 'horizontal',
  labelAlign: 'left',
  labelCol: { span: 12 },
  wrapperCol: { span: 11 },
  rowAttr: {
    // type:'',
    // justify:'',
    // gutter:'',
    // align:'',
  },
  celAttr: {
    // flex:'',
    // offset:'',
    // order:'',
    // pull:'',
    // push:'',
    span: 8,
    // xxl:{},
  }
}


const tempDataObj = [
  { enName: 'svModelDesc', cnName: '服务模式说明', type: 'label', value: '---', monoRow: true, formItemAttr: formItemAttr1 },
  { enName: 'svRegistPrice', cnName: '注册服务费', type: 'label', value: '---', formItemAttr: formItemAttr2 },
  { enName: 'svBankPrice', cnName: '开户服务费', type: 'label', value: '---', formItemAttr: formItemAttr2 },
  { enName: 'svTaxPrice', cnName: '税务变更费', type: 'label', value: '---', formItemAttr: formItemAttr2 },
  { enName: 'svYearPrice', cnName: '服务年费', type: 'label', value: '---', formItemAttr: formItemAttr2 },
  { enName: 'svBusinessPrice', cnName: '工商变更费', type: 'label', value: '---', formItemAttr: formItemAttr2 },
  { enName: 'svCanclePrice', cnName: '企业注销费', type: 'label', value: '---', formItemAttr: formItemAttr2 },
  { enName: 'invoiceMin|invoiceMax', cnName: '月开票额度限制', type: 'label', value: '---', formItemAttr: formItemAttr21 },
  { enName: 'rateType', cnName: '服务费模式', type: 'custom', value: '---', formItemAttr: formItemAttr2 },
  { enName: 'servicerateList', cnName: '服务费率', type: 'custom', value: '---', monoRow: true, formItemAttr: formItemAttr1 },
]

const unit = ' 元'

// 查询渠道合同服务模式配置
export default {
  name: 'EnterpriseServiceModel',
  props: {
    // 渠道id  必传
    serviceConfId: { type: [String, Number] },

    radioChange: { type: Function }
  },
  components: { FWFL },
  data() {
    return {
      value: '',
      formConfig: pageFormConfig,
      tempFormData: [],
      formTitleList: {},
      formDataConfig: {
        // 0:[
        //   { enName: 'svModelDesc', cnName: '服务模式说明', type: 'label', value: '月开票额不超过10万元',monoRow: true, formItemAttr: formItemAttr1},
        //   { enName: 'svRegistPrice', cnName: '注册服务费', type: 'label', value: '18319345678', formItemAttr: formItemAttr2 },
        //   { enName: 'svBankPrice', cnName: '开户服务费', type: 'label', value: '18319345678',formItemAttr: formItemAttr2 },
        //   { enName: 'svTaxPrice', cnName: '税务变更费', type: 'label', value: '18319345678', formItemAttr: formItemAttr2 },
        //   { enName: 'politicsStatus', cnName: '服务年费', type: 'label', value: '18319345678', formItemAttr: formItemAttr2 },
        //   { enName: 'svYearPrice', cnName: '工商变更费', type: 'label', value: '18319345678', formItemAttr: formItemAttr2 },
        //   { enName: 'svCanclePrice', cnName: '企业注销费', type: 'label', value: '18319345678', formItemAttr: formItemAttr2 },
        //   { enName: 'invoiceMin|invoiceMax', cnName: '月开票额度限制', type: 'label', value: '0  ≤  100,000', monoRow: true,formItemAttr: formItemAttr1 },
        //   { enName: 'standardCulture4', cnName: '服务费模式', type: 'label', value: '固定', monoRow: true,formItemAttr: formItemAttr1 },
        //   { enName: 'standardCulture5', cnName: '服务费率', type: 'label', value: '3.5%', monoRow: true,formItemAttr: formItemAttr1 },
        // ],
        // 1:[
        //   { enName: 'legalPhone', cnName: '服务模式说明', type: 'label', value: '月开票额不超过10万元',monoRow: true, formItemAttr: formItemAttr1},
        //   { enName: 'legalName', cnName: '注册服务费', type: 'label', value: '18319345678', formItemAttr: formItemAttr2 },
        //   { enName: 'cardNumber', cnName: '开户服务费', type: 'label', value: '18319345678',formItemAttr: formItemAttr2 },
        //   { enName: 'cardTerm', cnName: '税务变更费', type: 'label', value: '18319345678', formItemAttr: formItemAttr2 },
        //   { enName: 'politicsStatus', cnName: '服务年费', type: 'label', value: '18319345678', formItemAttr: formItemAttr2 },
        //   { enName: 'standardCulture1', cnName: '工商变更费', type: 'label', value: '18319345678', formItemAttr: formItemAttr2 },
        //   { enName: 'standardCulture2', cnName: '企业注销费', type: 'label', value: '18319345678', formItemAttr: formItemAttr2 },
        //   { enName: 'standardCulture3', cnName: '月开票额度限制', type: 'label', value: '0  ≤  100,000', monoRow: true,formItemAttr: formItemAttr1 },
        //   { enName: 'standardCulture4', cnName: '服务费模式', type: 'label', value: '固定', monoRow: true,formItemAttr: formItemAttr1 },
        //   { enName: 'standardCulture5', cnName: '服务费率', type: 'label', value: '3.5%', monoRow: true,formItemAttr: formItemAttr1 },
        // ],
      },
      tempDataSet:{},
    }
  },
  watch: {
    serviceConfId: {
      handler(val) {
        // getDataForDB('查询渠道合同服务模式配置', { channelId: val }).then(res => {
        //   // console.log('查询渠道合同服务模式配置===>', res);
        //   if (res.code === 200) {
        //     this.setFormData(res.result)
        //   }
        // })
      },
      deep: true,
      immediate: true
    },

  },
  mounted() {
    // getDataForDB('查询渠道合同服务模式配置', { channelId: this.channelId }).then(res => {
    //   // console.log('查询渠道合同服务模式配置===>', res);
    //   if (res.code === 200) {
    //     this.setFormData(res.result)
    //   }
    // })
    this.init()
  },
  methods: {
    init(){
      getChannelSvConf().then(res=>{
        if (res.success == true) {
          this.setFormData(res.result)
          this.tempDataSet = res.result
        }else{
          this.$message.warning(res.message|| '接口请求出错了')
        }
      })
    },
    onChange(e) {
      console.log(`checked = ${e.target.value}`,this.tempFormData);
      if (Object.prototype.toString.call(this.radioChange) === '[object Function]') {
        const selectItemInfo = this.tempFormData[e.target.value]
        const formArr = this.formDataConfig[e.target.value] //this.setFormItem(selectItemInfo)
        this.value = ''
        this.radioChange({formArr,title:selectItemInfo['svModelName'],itemInfo:selectItemInfo,serviceConfId:selectItemInfo.id})
      }
    },
    setFormData(dataList) {
      this.tempFormData = dataList
      const formDataConfig_ = {}
      const titleList = {}
      dataList.forEach((item, index) => {
        const tempObj_ = { ...item.servicefeeList && item.servicefeeList[0], ...item }
        const temp = this.setFormItem(tempObj_)
        titleList[index] = item['svModelName']
        formDataConfig_[index] = temp
        if(this.serviceConfId == item.id){
          this.value = index+''
        }
      });
      this.formTitleList = titleList
      this.formDataConfig = formDataConfig_
    },

    setFormItem(itemValueList){
      const temp = JSON.parse(JSON.stringify(tempDataObj))
        temp.forEach((dataItem, i) => {
          const { enName } = dataItem
          if (enName.indexOf('|') >= 0) {
            const t = enName.split('|')
            temp[i]['value'] = Utils.conversionElement(itemValueList[t[0]]) + unit +' ≤ ' + Utils.conversionElement(itemValueList[t[1]]) +unit
            // console.log(enName,t,tempObj_[t[0]] + '' + tempObj_[t[1]],tempObj_);
          } else {
            if (enName === 'servicerateList') {
              temp[i]['value'] = this.dataConv(enName, { d: itemValueList[enName], rateType: itemValueList['rateType'] })
            } else {
              temp[i]['value'] = this.dataConv(enName, itemValueList[enName])
            }
            // console.log(enName,tempObj_[enName],item);

            //企业注销费
            if (enName === 'svCanclePrice') {
              let valueNew = itemValueList[enName];
              temp[i]['value'] = valueNew > 0 ? this.dataConv(enName, valueNew) + '起' : '0元'
            }
          }
        })
        return temp
    },


    dataConv(enName, value) {
      const ll = ['svRegistPrice', 'svBankPrice', 'svTaxPrice', 'politicsStatus', 'svYearPrice', 'svCanclePrice','svBusinessPrice']
      let res = ''
      // console.log('@@@@@@@@@@@@@@@@@@@@@@@@@',enName, value);
      if (ll.indexOf(enName) >= 0) {
        res = Utils.conversionElement(value)
        if (isNaN(res)) {
          res = '--'
        }
        res += unit
      } else {
        res = value
      }
      // console.log('dataConv===>',enName,value,res + '元');
      return res

    }
  }
}
</script>


<style lang="less">
.Enterprise-service-model-con {
  width: 100%;

  .card-title {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }

  .data-list-con {
    max-height: 490px;
    padding: 0 10px;
    overflow: auto;
  }

  .card-body {
    padding: 0 10px;

    .ant-radio-group {
      width: 100%;
    }

    .esm-item {
      margin: 10px 0;

      .card-title {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .ant-radio-button-wrapper:last-child {
          border-radius: 4px;
          border: 1px solid #d9d9d9;
        }

        .ant-radio-button-wrapper:not(:first-child)::before {
          width: 0px;
        }

        .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
          border-color: #022EA0;
        }
      }

      .esm-item-body {
        padding: 10px;
        width: 100%;


        .pf-con {
          .ant-form {
            .ant-row {
              .ant-col {
                .ant-form-item {
                  margin-bottom: 5px;
                }
              }
            }
          }
        }

      }
    }
  }
}
</style>
